<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让路动画</title>
</head>
<body>
    <figure class="container">
        <span class="girl"></span>
        <div class="boys">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </figure>
</body>
    <style>
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #dddddd;
        }
        .container{
            width: 8em;
            height: 1em;
            font-size: 35px;
            display: flex;
            justify-content: space-around;
        }
        .container span{
            width: 1em;
            height: 1em;
            /*border: 1px dashed black;*/
        }
        .boys{
            width: 6em;
            display: flex;
            justify-content: space-between;
        }

        .container span::before{
            content:"";
            position: absolute;
            width: inherit;
            height: inherit;
            border-radius: 15%;
            box-shadow: 0 0 0.2em rgba(0,0,0,0.3);
        }
        .girl::before{
            background-color: hotpink;
        }
        .boys span::before{
            background-color: dodgerblue;
        }
        .boys span:nth-child(1)::before{
            filter:brightness(1);
        }
        .boys span:nth-child(2)::before{
            filter:brightness(1.15);
        }
        .boys span:nth-child(1)::before{
            filter:brightness(1.3);
        }
        .boys span:nth-child(1)::before{
            filter:brightness(1.45);
        }

        .container span{
                     width: 1em;
                     height: 1em;
                     --duration: 3s;
                 }
        .girl{
            animation: slide var(--duration) ease-in-out infinite alternate;
        }
        @keyframes slide {
            from{
                transform: translateX(0);
                filter: brightness(1);
            }
            to{
                transform: translateX(calc(8em - (1em * 1.25)));
                filter:brightness(1.45);
            }
        }
        .boys span{
            animation: var(--duration) ease-in-out infinite alternate;
        }
        .boys span:nth-child(1){
            -webkit-animation-name: jump-off-1;
            -moz-animation-name: jump-off-1;
            -o-animation-name: jump-off-1;
            animation-name: jump-off-1;
        }
        @keyframes jump-off-1 {
            0%,15%{
                transform: rotate(0deg);
            }
            35%,100%{
                transform-origin: -50% center;
                transform: rotate(-180deg);
            }
        }
        .boys span:nth-child(2) {
            animation-name: jump-off-2;
        }

        .boys span:nth-child(3) {
            animation-name: jump-off-3;
        }

        .boys span:nth-child(4) {
            animation-name: jump-off-4;
        }

        @keyframes jump-off-2 {
            0%, 30% {
                transform: rotate(0deg);
            }

            50%, 100% {
                transform-origin: -50% center;
                transform: rotate(-180deg);
            }
        }

        @keyframes jump-off-3 {
            0%, 45% {
                transform: rotate(0deg);
            }

            65%, 100% {
                transform-origin: -50% center;
                transform: rotate(-180deg);
            }
        }

        @keyframes jump-off-4 {
            0%, 60% {
                transform: rotate(0deg);
            }

            80%, 100% {
                transform-origin: -50% center;
                transform: rotate(-180deg);
            }
        }

        .boys span::before{
            -webkit-animation: var(--duration) ease-in-out infinite;
            -o-animation: var(--duration) ease-in-out infinite;
            animation: var(--duration) ease-in-out infinite alternate;
        }
        .boys span:nth-child(1)::before{
            filter: brightness(1);
            -webkit-animation-name: jump-down-1;
            -moz-animation-name: jump-down-1;
            -o-animation-name: jump-down-1;
            animation-name: jump-down-1;
        }
        @keyframes jump-down-1 {
            5%{
                transform: scale(1,1);
            }
            15%{
                transform-origin: center bottom;
                transform: scale(1.3,0.7);
            }
            20%,25%{
                transform-origin: center bottom;
                transform: scale(0.8,1.4);
            }
            40% {
                transform-origin: center top;
                transform: scale(1.3, 0.7);
            }

            55%, 100% {
                transform: scale(1, 1);
            }
        }
        .boys span:nth-child(2)::before {
            animation-name: jump-down-2;
        }

        .boys span:nth-child(3)::before {
            animation-name: jump-down-3;
        }

        .boys span:nth-child(4)::before {
            animation-name: jump-down-4;
        }

        @keyframes jump-down-2 {
            20% {
                transform: scale(1, 1);
            }

            30% {
                transform-origin: center bottom;
                transform: scale(1.3, 0.7);
            }

            35%, 40% {
                transform-origin: center bottom;
                transform: scale(0.8, 1.4);
            }

            55% {
                transform-origin: center top;
                transform: scale(1.3, 0.7);
            }

            70%, 100% {
                transform: scale(1, 1);
            }
        }

        @keyframes jump-down-3 {
            35% {
                transform: scale(1, 1);
            }

            45% {
                transform-origin: center bottom;
                transform: scale(1.3, 0.7);
            }

            50%, 55% {
                transform-origin: center bottom;
                transform: scale(0.8, 1.4);
            }

            70% {
                transform-origin: center top;
                transform: scale(1.3, 0.7);
            }

            85%, 100% {
                transform: scale(1, 1);
            }
        }

        @keyframes jump-down-4 {
            50% {
                transform: scale(1, 1);
            }

            60% {
                transform-origin: center bottom;
                transform: scale(1.3, 0.7);
            }

            65%, 70% {
                transform-origin: center bottom;
                transform: scale(0.8, 1.4);
            }

            85% {
                transform-origin: center top;
                transform: scale(1.3, 0.7);
            }

            100%, 100% {
                transform: scale(1, 1);
            }
        }
    </style>
</html>